<template>
  <div class="subject-right">
    <div class="subject-right-header">
      <div class="resourceTop">
        <div class="text">
          <p class="title007">老师信息</p>
          <p>
            <!-- <span>共&nbsp;{{ classNum }}&nbsp;个标签类别</span> -->
            <!-- <span>共&nbsp;{{ tableDatas.length }}&nbsp;个专业类别</span> -->
          </p>
        </div>
      </div>
    </div>
    <div class="subject-right-body">
      <div class="table">
        <el-table :data="tableDatas" height="74vh" style="width: 100%" empty-text="当前没有老师" @row-click="acs"
          :row-style="{ height: '80px' }">
          <el-table-column prop="userId" label="老师编号" align="center" />
          <el-table-column prop="nickName" label="老师" align="center" sortable />
          <el-table-column prop="id" label="管理" align="center">
            <template #default="scope">
              <el-tooltip content="修改老师信息" placement="left">
                <el-button type="info" size="mini" round @click="update(scope.row)" :icon="Edit" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="isEdit ? '修改老师' : '创建老师'" v-model="dialogVisible" width="80%">
      <el-form :model="teacherForm" :rules="rules" ref="formRef" label-width="100px" inline
        style="max-width: 100%; margin: 0 auto;">
        <el-form-item label="账号:" prop="userName">
          <el-input v-model="teacherForm.userName" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="姓名:" prop="nickName">
          <el-input v-model="teacherForm.nickName" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="密码:" prop="userPass">
          <el-input v-model="teacherForm.userPass" type="password" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="性别:" prop="userSex">
          <el-select v-model="teacherForm.userSex" placeholder="请选择性别" style="width: 150px;">
            <el-option label="男" value="0" />
            <el-option label="女" value="1" />
            <el-option label="隐私" value="2" />
          </el-select>
        </el-form-item>
     
        <el-form-item label="学校:" prop="userSex">
          <el-select v-model="teacherForm.schoolId" placeholder="请选择所属学校" style="width: 150px;">
            <el-option v-for="status in schools" :key="status.schoolId" :label="status.schoolName"
              :value="status.schoolId" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱:" prop="userEmail">
          <el-input v-model="teacherForm.userEmail" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="电话号码:" prop="userPhone">
          <el-input v-model="teacherForm.userPhone" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="身份证号:" prop="userCard">
          <el-input v-model="teacherForm.userCard" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="用户职位:" prop="userType">
          <el-select v-model="teacherForm.userType" placeholder="请选择用户职位" style="width: 150px;">
            <el-option v-for="status in userTypes" :key="status.value" :label="status.label" :value="status.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="账号状态:" prop="userStatus">
          <el-select v-model="teacherForm.userStatus" placeholder="请选择账号状态" style="width: 150px;">
            <el-option v-for="status in statusOptions" :key="status.value" :label="status.label"
              :value="status.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属专业:" prop="majorId">
          <el-select v-model="teacherForm.majorId" filterable placeholder="输入您所添加标签的所属专业" style="width: 150px;">
            <el-option v-for="item in directions" :key="item.directionId" :label="item.directionName"
              :value="item.directionId" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="quxiao">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Edit, Delete } from "@element-plus/icons-vue";
import { selectAllTeacherMajor,selectTeacherByMarjor ,updateTeacherMajor, selectAllSchool, addTeacherMajor, selectAllByid } from "@/api/teacher/AddClass";
import { directionList } from '@/api/courseManager';
import { useUserInfoStore } from "@/store/user.js";


const classNum = ref(0);
const tableDatas = ref([]);
const isEdit = ref(false);
const dialogVisible = ref(false);
const teacherForm = ref({});
const formRef = ref(null);
const statusOptions = ref([
  { value: '0', label: '启用' },
  { value: '1', label: '禁用' }
]);
const userTypes = ref([
  { value: '0', label: '管理员' },
  { value: '1', label: '讲师' }

]);
const schools = ref([]);

const directions = ref([]);
// 校验规则
const rules = {
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  nickName: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  userPass: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  userSex: [
    { required: true, message: '请选择性别', trigger: 'change' },
  ],
  userPhone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  userCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  majorId: [
    { required: true, message: '请选择所属专业', trigger: 'change' },
  ],
  userStatus: [
    { required: true, message: '请选择账号状态', trigger: 'change' },
  ],
  userType: [
    { required: true, message: '请选择用户类型', trigger: 'change' },
  ]
};
// 查询所有学校信息
const selectSchool = async () => {
  let res = await selectAllSchool();
  // console.log(res.data);
  schools.value = res.data;
}

selectSchool();

// 查询所有专业名称
const selectDirection = async () => {
  let res = await directionList();
  directions.value = res.data;
  // console.log("========================");
  // console.log(res.data);
}
selectDirection();


const getAllTeacherMajor = async () => {
  //从token中获取专业
  const mid = useUserInfoStore().userInfo.majorId
  let res = await selectTeacherByMarjor(mid);//根据专业id查询教师
  tableDatas.value = res.data;
};

getAllTeacherMajor();

const open = () => {
  isEdit.value = false;
  teacherForm.value = {
    userName: '',
    nickName: '',
    userPass: '',
    userSex: '',
    userAvatar: '',
    schoolId: '',
    userEmail: '',
    userPhone: '',
    userCard: '',
    userType: '',
    userStatus: '',
    majorId: ''
  };
  dialogVisible.value = true;
};

const update = async (row) => {
  isEdit.value = true;
  let xinxi = await selectAllByid(row.userId)
  //  console.log(xinxi.data);
  teacherForm.value = xinxi.data
  dialogVisible.value = true;
};

const submitForm = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (isEdit.value) {
        // console.log(teacherForm.value);
        await updateTeacherMajor(teacherForm.value);
        ElMessage({
          type: "success",
          message: `修改成功`,
        });
      } else {
        await addTeacherMajor(teacherForm.value);
        // console.log(teacherForm.value);
        ElMessage({
          type: "success",
          message: `添加成功`
        });
      }
      dialogVisible.value = false;
      // 清空表单数据
      teacherForm.value = {};
      getAllTeacherMajor();
      // 清空表单校验数据
      formRef.value.resetFields();
    } else {
      return false;
    }
  });
};
const quxiao = () => {
  dialogVisible.value = false;
  // 清空表单校验数据
  formRef.value.resetFields();
};



const acs = (row) => {
  // console.log(row);
};
</script>

<style scoped lang="scss">
@import url(@/assets/font/iconfont.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.resourceTop {
  width: 100%;
  height: 100px;
  background-color: white;
  border: 1px solid #f0f0f0;
  padding: 16px 60px;
}

.resourceTop .logo {
  width: 60px;
  height: 60px;
  background-color: #ff6b0f;
  border-radius: 50%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.resourceTop .logo img {
  width: 60px;
  height: 60px;
  padding: 18px;
}

.resourceTop .text {
  width: 120px;
  height: 100%;
  margin-left: 20px;
  display: inline-block;
}

.resourceTop .text .title007 {
  font-size: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;
}

.resourceTop .text p span {
  color: rgba(0, 0, 0, 0.45);
}

.resourceTop .text p a {
  color: #f4523b;
}

.search {
  display: flex;
  float: right;
  border-radius: 2px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
}

.sousuo {
  width: 40px;
  height: 40px;
  padding: 11px;
  background-color: #fff;
}

.resourceTop .search input {
  width: 320px;
  height: 40px;
  border: none;
  background-color: #fff;
}

.search input:focus {
  outline: none;
}

.search:hover {
  border: 1px solid #FF6B0F;
}

.nav-right {
  float: right;
  width: 95px;
  height: 100%;
  padding: 10px 0;
}

.subject-right-header {
  width: 100%;
}

.subject-right-body {
  background-color: #eeeeee;
  height: 78.5vh;
  width: 99.9%;
  padding: 24px 60px;
}

.table {
  height: 100px;
  width: 100%;
}

::v-deep .el-table tr:hover {
  cursor: pointer;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  width: 100px;
}

.el-form-item__content {
  margin-left: 100px;
}
</style>